<template>
    <div class="search-page">
        <el-form>
            <el-card class="el-card bottom10" v-if="showEquipment">
                <el-row>
                    <el-col :span="16">
                        <div class="select-box">
                            <div class="select-li" v-if="showEquipment">
                                <span class="select-label">租户设备：</span>
                                <el-select class="width120" v-model="equipment1" filterable placeholder="请选择" @change='equipmentChange'>
                                    <el-option v-for="item in equipmentList" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="card1-right">
                            <el-button type="primary" class="comfire-button" @click="createTask">创建监控任务</el-button>
                            <TimePicker>
                            </TimePicker>

                        </div>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="el-card bottom10">
                <el-row>
                    <el-col :span="18">
                        <div class="select-box">
                            <div class="select-li">
                                <span class="select-label">设备类型：</span>
                                <el-select class="width120" v-model="equipment" filterable placeholder="请选择" @change='equipmentChange'>
                                    <el-option label="全部" value="-1"></el-option>
                                    <el-option v-for="item in equipmentTypeList" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="select-li">
                                <span class="select-label">网络类型：</span>
                                <el-select class="width120" v-model="equipment" filterable placeholder="请选择" @change='equipmentChange'>
                                    <el-option label="全部" value="-1"></el-option>
                                    <el-option v-for="item in networkTypeList" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="select-li">
                                <span class="select-label">运营商：</span>
                                <el-select class="width120" v-model="equipment" filterable placeholder="请选择" @change='equipmentChange'>
                                    <el-option label="全部" value="-1"></el-option>
                                    <el-option v-for="item in OperatorList" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <el-dropdown @command="handleCommand" class="float-right" trigger="click">
                            <span class="el-dropdown-link">
                                <svg-icon name='icon-export' svgClass='export-svg' />
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="1">导出图片</el-dropdown-item>
                                    <el-dropdown-item command="2">导出表格</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-card>
        </el-form>
    </div>
</template>

<script lang="ts">
import { ref, reactive, toRefs, defineComponent } from 'vue';
import TimePicker from 'comps/timePicker/index.vue';
import SvgIcon from 'svgIcon/SvgIcon.vue';
import { useRouter } from 'vue-router';
import bus from 'utils/mitt';
export default defineComponent({
    name: '',
    components: { TimePicker, SvgIcon },
    setup() {
        const router = useRouter();
        let showEquipment = ref(true);
        let equipment = ref('-1');
        let equipment1 = ref('1');
        let equipmentChange = (e: String) => {
            console.log(equipment);
        };
        interface EquipmentArr {
            value: String;
            label: String;
        }
        // 租户设备
        let equipmentList: Array<EquipmentArr> = reactive([
            {
                value: '1',
                label: '中国移动用户'
            },
            {
                value: '2',
                label: '金地集团'
            },
            {
                value: '3',
                label: '国家电网'
            }
        ]);
        //设备类型
        let equipmentTypeList: Array<EquipmentArr> = reactive([
            {
                value: '1',
                label: '云段安保机器人'
            },
            {
                value: '2',
                label: '云端清洁机器人'
            },
            {
                value: '3',
                label: '巡逻测温机器人'
            }
        ]);
        //网络类型
        let networkTypeList: Array<EquipmentArr> = reactive([
            {
                value: '1',
                label: '4G/5G'
            },
            {
                value: '2',
                label: 'Wi-Fi'
            }
        ]);
        //运营商
        let OperatorList: Array<EquipmentArr> = reactive([
            {
                value: '1',
                label: '中国电信'
            },
            {
                value: '1',
                label: '中国联通'
            },
            {
                value: '1',
                label: '中国移动'
            }
        ]);

        const options: any = reactive({
            // 导出
            handleCommand: (v: any) => {
                if (v == 1) {
                    bus.emit('dropdownImg', 'dropdownImg');
                } else {
                    bus.emit('dropdownTable', 'dropdownTable');
                }
                console.log(v);
            },
            // 跳转到任务创建页面
            createTask: () => {
                router.push('/monitorTask/configurationTask');
            }
        });
        return {
            showEquipment,
            equipment,
            equipment1,
            equipmentChange,
            equipmentList,
            equipmentTypeList,
            networkTypeList,
            OperatorList,
            ...toRefs(options)
        };
    }
});
</script>

<style lang="scss" scoped>
.search-page {
    .el-card {
        --el-card-padding: 12px 20px;
        .select-label {
            line-height: 32px;
            font-size: 14px;
        }
        .select-box {
            display: flex;
            .select-li {
                margin-right: 20px;
                .width120 {
                    width: 120px;
                }
            }
        }
    }
    .card1-right {
        display: flex;
        justify-content: flex-end;
        .comfire-button {
            font-size: 14px;
            margin-right: 10px;
        }
    }
    .el-button--small {
        padding: 8.2px 15px;
    }
}
</style>